<template>
    <div class="container">
      <div class="tips-title">1.基本</div>
      <el-calendar v-model="value1"></el-calendar>
      <div class="tips-title">2.自定义范围</div>
      <el-calendar :range="['2019-03-04', '2019-03-24']"></el-calendar>
      <div class="tips-title">3.自定义内容</div>
      <el-calendar>
        <template slot="dateCell" slot-scope="{date, data}">
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔' : ''}}
          </p>
        </template>
      </el-calendar>
    </div>
</template>
<script>
  export default {
    name: 'o-calendar',
    data() {
      return {
        value1: new Date()
      }
    }
  }
</script>
<style>
</style>
